export default {
  // 定义 Vue 插件
  install(Vue) {
    Vue.directive("candrag", {
      // 全局指令名为 v-candrag
      inserted(el) {
        el.onmousedown = function (ev) {
          // 获取鼠标按下时的偏移量（鼠标位置 - 元素位置）
          const disX = ev.clientX - el.offsetLeft;
          const disY = ev.clientY - el.offsetTop;
          document.onmousemove = function (ev) {
            // 获取鼠标实时移动时，元素的位置（鼠标实时位置 - 偏移量）
            const l = ev.clientX - disX;
            const t = ev.clientY - disY;
            // 实时设置元素位置
            el.style.left = l + "px";
            el.style.top = t + "px";
          };
          document.onmouseup = function () {
            // 鼠标抬起时，销毁移动事件和鼠标抬起事件
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    });
  },
};
